<template>
  <!-- 此版拆分 只是用于 订单页面的搜索展示 -->

  <el-form inline label-width="90px" ref="formRef">
    <el-form-item label="交易编号">
      <!-- 收集交易编号数据 -->
      <el-input placeholder="请输入交易编号" v-model="searchForm.outTradeNo" style="width: 140px"></el-input>
    </el-form-item>
    <el-form-item label="收货人">
      <!-- 收集收货人数据 -->
      <el-input placeholder="请输入收货人" v-model="searchForm.consignee" style="width: 140px"></el-input>
    </el-form-item>
    <el-form-item label="收货人电话">
      <!-- 收集收货人电话 -->
      <el-input placeholder="请输入收货人电话" v-model="searchForm.consigneeTel" style="width: 140px"></el-input>
    </el-form-item>
    <el-form-item label="收货地址">
      <!-- 收集收货人地址 -->
      <el-input placeholder="请输入收货地址" v-model="searchForm.deliveryAddress" style="width: 140px"></el-input>
    </el-form-item>
    <el-form-item label="订单状态">
      <!-- 收集订单状态 -->
      <el-select v-model="searchForm.orderStatus" style="width: 140px">
        <el-option label="已支付" value="PAID"> </el-option>
        <el-option label="未支付" value="UNPAID"> </el-option>
        <el-option label="支付" value="FINISHED"> </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="创建时间">
      <!-- <el-input placeholder="创建时间"></el-input> -->
      <el-date-picker
        v-model="searchForm.createTimeBegin"
        type="datetime"
        placeholder="创建时间"
        style="width: 140px"
        @change="getSTimeBegin"
      />
    </el-form-item>
    <el-form-item label="过期时间">
      <!-- <el-input placeholder="过期时间"></el-input> -->
      <el-date-picker
        v-model="searchForm.createTimeEnd"
        type="datetime"
        placeholder="过期时间"
        style="width: 140px"
        @change="getSTimeEnd"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="resetSearchOrderList">重置</el-button>
      <el-button type="primary" @click="searchOrderList">搜索</el-button>
      <el-button type="primary" @click="showDialog">设置排序</el-button>
    </el-form-item>

    <!-- 搜索弹框 -->
    <Rank v-if="dialogVisible" @dialogClose="dialogClose"></Rank>
  </el-form>
</template>

<script setup lang="ts">
// 导入组件类型
import type { orderSearch } from '@/api/order'
// 导入ref
import { ref, onMounted } from 'vue'
// 导入转换时间戳的包
import moment from 'moment'

// 导入拖拽的插件
import Sortable from 'sortablejs'
// import { json } from 'stream/consumers'

// 接收父组件传递过来的初始化表单数据
const props = defineProps(['searchData', 'list'])
// 接收父组件传递过来的自定义事件
const emits = defineEmits<{
  (e: 'updateSearchData', search: orderSearch | undefined): void
  (e: 'isShowDialog'): void
}>()

// 初始化搜索表单数据
const initSearchForm = () => ({
  outTradeNo: '', // 订单编号
  consignee: '', // 收货人姓名
  consigneeTel: '', // 收货人电话
  deliveryAddress: '', // 收货人地址
  orderStatus: '', // 订单状态
  createTimeBegin: '', // 创建时间
  createTimeEnd: '' // 过期时间
})

// 声明一个变量,用来存储搜索表单的数据
const searchForm = ref<orderSearch>(initSearchForm())

// 声明一个函数,用于处理创建时间的转换
const getSTimeBegin = async (val: string) => {
  // 将数据进行处理
  searchForm.value.createTimeBegin = moment(val).format('YYYY-MM-DD HH:mm:ss')
}

// 声明一个函数,用于处理过期时间的转换
const getSTimeEnd = async (val: string) => {
  // 将数据进行处理
  searchForm.value.createTimeEnd = moment(val).format('YYYY-MM-DD HH:mm:ss')
}

// 重置按钮
const resetSearchOrderList = () => {
  // 开启 loading 效果
  props.searchData.status = true
  // 清除表单数据
  searchForm.value = initSearchForm()
  // 触发自定义事件
  // 然后将重置过的参数数据传递给父组件
  emits('updateSearchData', initSearchForm())
  // 将收集好的数据通过 Pubsub-js 传递给父组件
  // Pubsub.publish('searchDate', initSearchForm())
  // 重新获取订单列表数据
  props.searchData.orderList()
}

// 搜索按钮
const searchOrderList = () => {
  // console.log(searchForm.value)
  // 点击搜索时触发自定义事件
  // 将已经收集好的搜索数据传递给父组件
  emits('updateSearchData', searchForm.value)
  // 开启 loading 效果
  props.searchData.status = true
  // 将当前页面改成1
  props.searchData.page = 1
  // 发送请求传递参数
  props.searchData.orderList()
}

// 控制显示和隐藏
const dialogVisible = ref(false)

const dialogClose = () => {
  dialogVisible.value = false
}

// 排序按钮
const showDialog = () => {
  // emits('isShowDialog')
  dialogVisible.value = true
  console.log(dialogVisible.value)
}

const tableData = ref<number[]>()

// 初始化 排序
const initSort = () => {
  const el = document.getElementsByClassName('el-form')[0]
  // 这里报错 !!!!!
  tableData.value = el
  console.log(el)
  console.log(tableData)
  const sortForm = new Sortable(el, {
    onEnd: (evt: any) => {
      // 监听拖动结束事件
      // console.log(this) // this是当前vue上下文
      console.log(evt.oldIndex) // 当前行的被拖拽前的顺序
      console.log(evt.newIndex) // 当前行的被拖拽后的顺序
      // 这里就可以写我们需要传给后台的逻辑代码
      // 我们有了 evt.oldIndex 和 evt.newIndex 这两个参数做索引，我们可以根据绑定在表格上面的 data 这个 Array 找到两个相应的记录。就可以针对数据进行操作啦。
      // 下面将拖拽后的顺序进行修改
      const currRow = Array.from(tableData.value).splice(evt.oldIndex, 1)[0]
      Array.from(tableData.value).splice(evt.newIndex, 0, currRow)
      const newData = []
      Array.from(tableData.value).forEach((item, index: number) => {
        //   console.log(item, index)

        newData[index] = {
          id: item.id,
          rank: index + 1
        }

        // localStorage.setItem('pup-up', JSON.stringify(newData))
      })
    }
  })

  // 下面是将排序结果更新到数据库中，根据自己项目的逻辑进行实现即可。
  // const data = {
  //   id: this.$route.params.id,
  //   datas: {
  //     streams: newData
  //   }
  // }
}
onMounted(() => {
  initSort()
})
</script>

<style scoped></style>
